<template>
  <div>
    <p>clicked:{{count}}, count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>&nbsp;
    <button @click="decrement">-</button>&nbsp;
    <button @click="incrementIfOdd">increment if odd</button>&nbsp;
    <button @click="incrementAsync">increment async</button>&nbsp;
  </div>
</template>

<script>
  import {mapState, mapActions, mapGetters} from 'vuex';

  export default {
    name: "App",
    computed: {
      ...mapState(['count']), // mapState 返回值：{count(){return this.$store.state['count']}}
      // ...mapGetters(['evenOrOdd']), // mapGetters 返回值：{evenOrOdd(){return this.$store.getters['evenOrOdd']}}
      ...mapGetters({evenOrOdd: 'evenOrOdd2'}), // 如果我们使用的名字和在store定义的名字不一样就使用对象获取
    },
    methods: {
      ...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync'])
      /*increment() {
        // 通知vuex 去增加
        this.$store.dispatch('increment') //  触发store 中对应的的action 被调用
      },
      decrement() {
        this.$store.dispatch("decrement");
      },
      incrementIfOdd() {
        this.$store.dispatch('incrementIfOdd')
      },
      incrementAsync() {
        this.$store.dispatch('incrementAsync');
      }*/
    }
  }
</script>

<style scoped>

</style>
